<template>
	<view class="service-container">

		<view class="section">
			<text class="section-title">科室选择</text>
			<picker mode="selector" :range="departments" @change="onDepartmentChange">
				<view class="picker-item">
					<text>{{ selectedDepartment || '请选择科室' }}</text>
					<text class="arrow">></text>
				</view>
			</picker>
		</view>

		<view class="section">
			<text class="section-title">预约日期</text>
			<picker mode="date" :start="startDate" :end="endDate" @change="onDateChange">
				<view class="picker-item">
					<text>{{ selectedDate || '请选择日期' }}</text>
					<text class="arrow">></text>
				</view>
			</picker>
		</view>

		<view class="section">
			<text class="section-title">可预约时段</text>
			<view class="time-slots">
				<view v-for="(slot, index) in timeSlots" :key="index" class="time-slot"
					:class="{ selected: selectedTimeSlot === index }" @click="selectTimeSlot(index)">
					<text>{{ slot.time }}</text>
					<text class="slot-status">{{ slot.available ? '可预约' : '已满' }}</text>
				</view>
			</view>
		</view>

		<button class="submit-button" :disabled="!canSubmit" @click="submitAppointment">确认预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				departments: ['内科', '外科', '妇产科', '儿科', '眼科', '耳鼻喉科', '口腔科', '皮肤科'],
				selectedDepartment: '',
				startDate: '',
				endDate: '',
				selectedDate: '',
				timeSlots: [{
						time: '8:00-8:30',
						available: true
					},
					{
						time: '8:30-9:00',
						available: true
					},
					{
						time: '9:00-9:30',
						available: false
					},
					{
						time: '9:30-10:00',
						available: true
					},
					{
						time: '10:00-10:30',
						available: true
					},
				],
				selectedTimeSlot: -1,
			}
		},
		computed: {
			canSubmit() {
				return this.selectedDepartment && this.selectedDate && this.selectedTimeSlot >= 0 && this.timeSlots[this
					.selectedTimeSlot].available;
			}
		},
		created() {
			const today = new Date();
			this.startDate = this.formatDate(today);

			const endDate = new Date();
			endDate.setDate(today.getDate() + 14);
			this.endDate = this.formatDate(endDate);

			this.fetchTimeSlots();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			onDepartmentChange(e) {
				const index = e.detail.value;
				this.selectedDepartment = this.departments[index];
				this.fetchTimeSlots();
			},
			onDateChange(e) {
				this.selectedDate = e.detail.value;
				this.fetchTimeSlots();
			},
			selectTimeSlot(index) {
				if (this.timeSlots[index].available) {
					this.selectedTimeSlot = index;
				}
			},
			submitAppointment() {
				uni.showLoading({
					title: '提交中...'
				});

				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '预约成功',
						icon: 'success'
					});

					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1000);
			},
			fetchTimeSlots() {
				// 模拟API调用获取可预约时段
				if (this.selectedDepartment && this.selectedDate) {
					console.log('获取时间段:', this.selectedDepartment, this.selectedDate);
					// 实际应用中发起请求
				}
			}
		}
	}
</script>

<style>
	.service-container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.back-button {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		color: #3295e6;
	}

	.section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.picker-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.arrow {
		color: #999;
	}

	.time-slots {
		display: flex;
		flex-wrap: wrap;
	}

	.time-slot {
		width: 45%;
		margin-right: 5%;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 8rpx;
		border: 1px solid #ddd;
		display: flex;
		flex-direction: column;
	}

	.time-slot.selected {
		border-color: #3295e6;
		background-color: #e6f2ff;
	}

	.slot-status {
		font-size: 24rpx;
		color: #888;
		margin-top: 10rpx;
	}

	.submit-button {
		background-color: #3295e6;
		color: white;
		border-radius: 12rpx;
		padding: 20rpx 0;
		font-size: 32rpx;
		margin-top: 30rpx;
	}

	.submit-button[disabled] {
		background-color: #ccc;
	}
</style>